<template>
	<div class="learn-record">
		<div style="width: 100%;display: flex; justify-content: flex-end;">
			<!-- 条件查询 -->
			<div style="display: flex;">
				<el-input v-model="learnRecord.title" placeholder="按标题查询" 
					@change="onSubmit">
				</el-input>
				<el-input v-model="learnRecord.userName" placeholder="按用户名查询"
					@change="onSubmit" style="margin-left: 10px;">
				</el-input>
				<el-select v-model="learnRecord.status" placeholder="按状态查询" 
					@change="onSubmit" style="margin-left: 10px;width: 400px;">
					<el-option label="未学习" :value="0"></el-option>
					<el-option label="已学习" :value="1"></el-option>
				</el-select>
				<el-button @click="reset" style="margin-left: 10px;" v-debounce>
					重置
				</el-button>
			</div>
		</div>
		<div class="learn-record-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" fit width="80" fixed></el-table-column>
				<el-table-column prop="title" label="标题" fit ></el-table-column>
				<el-table-column label="类型" fit >
					<template slot-scope="scope">
						<span v-if="scope.row.type === 0">学习资料</span>
						<span v-if="scope.row.type === 1">培训视频</span>
					</template>
				</el-table-column>
				<el-table-column prop="userName" label="用户名" fit ></el-table-column>
				<el-table-column label="状态" fit>
					<template slot-scope="scope">
						<span v-if="scope.row.status === 0" style="color: #ff0000 ;">未学习</span>
						<span v-if="scope.row.status === 1" style="color: #00ff00 ;">已学习</span>
					</template>
				</el-table-column>
				<el-table-column label="完成时间" fit>
					<template slot-scope="scope">
						<span v-if="scope.row.completeTime !== null">{{scope.row.completeTime}}</span>
						<span v-else>未完成</span>
					</template>
				</el-table-column>
<!-- 				<el-table-column label="操作" width="100" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button @click="editGoods(scope.row)" type="text" size="mini">
								详情
							</el-button>
							<el-divider direction="vertical"></el-divider>
							<el-button @click="deleteGoods(scope.row.id)" type="text" size="mini">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import api from '../../../api/companyCulture.js'
	export default{
		data() {
			return{
				// 表格加载
				loading: false,
				//表格数据
				tableData: [],
				// 总条数
				total: 0,
				// 当前页数
				currentPage: 1,
				// 分页大小
				pageSize: 50,
				learnRecord: {
					title: '',
					status: null,
					userName: ''
				}
			}
		},
		mounted() {
			this.getLearnRecordList()
		},
		methods:{
			// 重置
			reset(){
				this.currentPage = 1
				this.pageSize = 50
				this.learnRecord.title = ''
				this.learnRecord.status = null
				this.learnRecord.userName = ''
				this.getLearnRecordList()
			},
			// 模糊查询
			onSubmit(){
				this.currentPage = 1
				this.pageSize = 50
				this.getLearnRecordList()
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.getLearnRecordList()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage
				this.getLearnRecordList()
			},
			// 获取数据
			getLearnRecordList(){
				this.loading = true
				let data = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					title: this.learnRecord.title,
					status: this.learnRecord.status,
					nickName: this.learnRecord.userName
				}
				api.getLearnRecordList(data).then(res => {
					this.loading = false
					if(res.code === 200){
						console.log("res.data===>",res.data)
						this.tableData = new Array()
						if (res.data.learnRecordVoList.length === 0) {
							return
						}
						
						this.total = res.data.total
						this.tableData = res.data.learnRecordVoList.map((item,index) =>{
							return {
								i: (this.currentPage - 1) * this.pageSize + index + 1,
								id: item.id,
								title: item.title,
								type: item.type,
								userName: item.nickName,
								status: item.status,
								completeTime: item.completeTime
							}
						})
						console.log("列表==>",this.tableData)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		text-align: center;
	}

	.learn-record{
		height: 100%;
	}

	.learn-record-table {
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>